import classnames from 'classnames';
import { Icon } from '@/components/Icon';
import styles from './index.module.scss';
import { ResultType } from '@/store/reducer/search';
import { useHistory } from 'react-router-dom';
import { Image } from 'antd-mobile';
import imgSrc from '@/assets/none.png';
import { ArticleType } from '@/store/reducer/articles';

/*
  学习目标：使用Image组件优化长列表-常见的优化手动
    1. 图片懒加载
    2. 破图的处理
    3. 图片变形的处理
*/
type PropsType = {
  itemData: ResultType | ArticleType;
};
export default function ArticleItem(props: PropsType) {
  const item = props.itemData;
  const { cover } = item;
  const { images = [], type } = cover || {};
  const history = useHistory();

  return (
    <div className={styles.root} onClick={() => history.push('/article/' + item.art_id)}>
      {/* t3: 三图结构 none-mt没有图片结构  */}
      <div
        className={classnames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
        <h3>{item.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((item) => (
              <div className="article-img-wrapper" key={item}>
                <Image src={item} fit="cover" lazy fallback={<img src={imgSrc} alt="" />} />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{item.aut_name}</span>
        <span>{item.comm_count}</span>
        <span>{item.pubdate}</span>

        <span className="close">
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  );
}
